<template>
  <div class="container">
    <h1 style="text-align: center;">帖 子 大 厅</h1>
    <div class="custome-box">
      <button @click="loadData">+加载+</button>
      <div v-for="(item) in users" :key="item.id">{{ item.name }}</div>
    </div>
    <router-view />
  </div>
</template>

<script>
// import active from '@/components/posts/diretive/dretive'
let userId = 100;

function f2(delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(delay)
    }, delay)
  });
};

try {
  new Promise((resolve) => {
    console.log('global');
    resolve(666);
  }).then(res => {
    console.log('ok', res);
    return 999;
  }).then(res1 => {
    console.log('ok1', res1);
  })
} catch (err) {
  console.log('catch', err);
}


export default {
  // directives: {
  //   active
  // },
  data() {
    return {
      currIndex: 0,
      users: [
        {
          id: userId++,
          name: 'test',
        },
        {
          id: userId++,
          name: 'demo',
        },
        {
          id: userId++,
          name: 'xmk',
        },
      ],
    }
  },
  computed: {
    showPostsListBtn() {
      return this.$route.name === 'detail'
    }
  },
  beforeCreate() {
    console.log('beforeCreate');
  },
  created() {
    console.log('created');
  },
  mounted() {
    console.log('mounted');
  },
  methods: {
    loadData() {
      this.users.unshift({ id: userId++, name: 'admin', });
    },
    toPOstsListPage() {
      // console.log('now:', this.$route)
      const curRouteName = this.$route.name
      if (curRouteName === 'detail') {
        this.$router.go(-1)
      }
      if (curRouteName === 'list') {
        // this.$router.push({ path: '/list' })
      }
    },
    handleClick(index) {
      // console.log(index);
      this.currIndex = index;
    },
  },
}
</script>

<style lang="scss">
.container {
  .box {
    width: 90%;
    height: 5vh;
    display: flex;
    justify-content: center;
    .item {
      width: 33%;
      padding: 10px;
      text-align: center;
      border: 2px solid #000;
    }
    .current-active {
      background-color: #409eff;
      color: #fff;
    }
  }
  .posts-list-link {
    margin-left: 150px;
    padding: 5px 10px;
    width: 75px;
    border: 1px dashed #409eff;
    border-radius: 5px;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    color: #409eff;
    cursor: pointer;
  }
  .custome-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
</style>
